概述
Vue提供了transition元件,在DOM中新增、刪除、更改時提供了多種應用過渡效果,可以加入進入(Enter)離開(Leave)和轉換(Transition)的效果

使用方法

• 條件渲染(v-if)
• 條件顯示(v-show)
• 動態元件
• 元件根節點

效果種類
以下有6種漸入與漸出效果

1.v-enter

• 進入的起始狀態
• 在元素前加入,插入後移除一幀

2.v-enter-active

• 整個進入過程
• 在元素前加入,動畫完成後移除
• 可定義淡入過程時間、延遲、移動曲線

3.v-enter-to (v-enter移除時觸發)

• 進入的結束狀態
• 插入元素後,加入一幀
• 動畫完成時刪除

4.v-leave

• 離開的開始狀態
• 觸發離開立即加入,一幀後刪除

5.v-leave-active

• 整個離開過程
• 觸發離開時加入,完成動畫後移除
• 可定義淡出過程時間、延遲、移動曲線

6.v-leave-to(v-leave移除時觸發)

• 離開的結束狀態
• 觸發離開時,加入一幀
• 動畫完成時刪除

(圖片來源:Vue官網)

範例
1.v-enter

2. v-enter-active



3.v-enter-to

參考資料: https://vuejs.org/v2/guide/transitions.html#Transition-Classes